<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>{$Webset.title|default="MySnakeAdmin"}</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
<!-- <link rel="shortcut icon" href="favicon.ico"> -->
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="__CSS__/animate.min.css" rel="stylesheet">
<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
<link href="__JS__/layui/css/layui.css" rel="stylesheet">
<link href="__CSS__/msg-list-bar.css" rel="stylesheet">
<style media="screen">
.Mask{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
}
</style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
    <div id="wrapper">
		<div class="Mask"></div>
        <!--左侧导航开始-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close"><i class="fa fa-times-circle"></i>
            </div>
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header" style="padding:0;">
                        <div class="dropdown profile-element">
                            <img title="LOGO" width="220px;" src="{$Webset.logo|default=''}" height="60px;">
                        </div>
                        <div class="logo-element" style="padding:0;font-size:14px;">
                            <img title="mini-LOGO" width="70px;" src="{$Webset.mini_logo|default=''}" height="60px;">
                        </div>
                    </li>
                    {if !empty($menu)}
                    {foreach name="menu" item="vo"}
                    <li class="menu">
                        <a href="{$vo.href}">
                            <i class="{$vo.style}"></i>
                            <span class="nav-label">{$vo.node_name} </span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            {if !empty($vo['child'])}
                            {foreach name="$vo['child']" item="v"}
                            <li>
								<a {if $v.is_static eq 2} class="J_menuItem"  {/if} href="{$v.href}">{$v.node_name}</a>
                            </li>
                            {/foreach}
                            {/if}
                        </ul>
                    </li>
                    {/foreach}
                    {/if}
                </ul>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0;">
                    <div class="navbar-header" style="width:100%">
                        <ul class="layui-nav layui-bg-cyan">
                            <li>
                                <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="line-height:2rem;margin-top:12px;">
                                    <i class="fa fa-bars"></i>
                                </a>
                            </li>
                            <li style="float:right;line-height:60px;">
                                <a class="right-sidebar-toggle" aria-expanded="false">
                                    <span><img alt="image" class="img-circle" src="{$head}" style="width:40px;height:40px;"/></span>
                                    <!-- <span class="layui-badge" style="position:absolute;right:0;top:15px;">9</span> -->
                                </a>
                            </li>
							<li style="float:right;line-height:60px;margin-right:30px;position:relative">
								<button class="btn btn-primary " href="javascript:;" id="msg-list-btn">
                                    <i class="fa fa-bell-o"></i>
									<span id="msgCount" class="layui-badge-dot"></span>
                                </button>
							</li>
                        </ul>
                    </div>
<!-- <ul class="nav navbar-top-links navbar-right">
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle" aria-expanded="false">
<i class="fa fa-tasks"></i> 主题
</a>
</li>
</ul> -->
</nav>
</div>
<div class="row content-tabs">
    <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
    </button>
    <nav class="page-tabs J_menuTabs">
        <div class="page-tabs-content">
            <a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页</a>
        </div>
    </nav>
    <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
    </button>
    <div class="btn-group roll-nav roll-right">
        <button class="dropdown J_tabClose" data-toggle="dropdown">常用操作<span class="caret"></span>

        </button>
        <ul role="menu" class="dropdown-menu dropdown-menu-right">
            <li class="J_tabGo"><a>前进</a>
            </li>
            <li class="J_tabBack"><a>后退</a>
            </li>
            <li class="J_tabFresh"><a>刷新</a>
            </li>
            <li class="divider"></li>
            <li class="J_tabShowActive"><a>定位当前选项卡</a>
            </li>
            <li class="divider"></li>
            <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
            </li>
            <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
            </li>
        </ul>
    </div>
    <a href="{:url('admin/login/loginOut')}" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i>
    退出</a>
</div>
<div class="row J_mainContent" id="content-main">
	<div id="IframeMark"></div>
    <iframe class="J_iframe" name="iframe0" width="100%" height="100%"
    src="{:url('Index/indexPage')}" frameborder="0" marginheight="0" marginwidth="0"
    data-id="index_v1.html" seamless></iframe>
</div>
<div class="footer">
    <div class="pull-right">&copy; <a href="{$_SERVER['REQUEST_SCHEME']}://{$Webset.copyright|default=''}" target="_blank">{$Webset.copyright|default=''}"</a>
    </div>
</div>
</div>
<!--右侧部分结束-->
<!--右侧边栏开始-->
<div id="right-sidebar">
    <div class="sidebar-container">

        <div class="tab-content">
            <div id="tab-1" class="tab-pane active">
                <li class="nav-header" style="background-size:100%;">

					<div class="logo-element dropdown" style="font-size:12px;padding:30px 25px;">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear">
                                <span class="block m-t-xs"><strong class="font-bold">{$username}</strong></span>
                                <span class="text-muted text-xs block">{$rolename}<b class="caret"></b></span>
                            </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs" style="margin-left:30%;color:#333;">
                            <li>
                                <a class="J_menuItem hide_mask" href="{:url('admin/profile/headedit')}">编辑头像</a>
                            </li>
                            <li>
                                <a class="J_menuItem hide_mask" href="{:url('admin/profile/index')}">修改信息</a>
                            </li>

                            <li>
                                <a href="{:url('admin/index/index')}">返回首页</a>
                            </li>

                            <li>
                                <a href="{:url('admin/login/loginOut')}">安全退出</a>
                            </li>
                        </ul>
                    </div>
                    <div class="dropdown profile-element" style="text-align:center;">
                        <span><img alt="image" class="img-circle" src="{$head}" style="width:64px;height:64px;"/></span>
                        <div class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                                    <span class="block m-t-xs"><strong class="font-bold">{$username}</strong></span>
                                    <span class="text-muted text-xs block">{$rolename}<b class="caret"></b></span>
                                </span>
                            </a>

                            <ul class="dropdown-menu animated fadeInRight m-t-xs" style="color:#333;margin-left:30%;">
                                <li>
                                    <a class="J_menuItem hide_mask" href="{:url('admin/profile/headedit')}">编辑头像</a>
                                </li>
                                <li>
                                    <a class="J_menuItem hide_mask" href="{:url('admin/profile/index')}">修改信息</a>
                                </li>
                                <li>
                                    <a href="{:url('admin/index/index')}">返回首页</a>
                                </li>
                                <li>
                                    <a href="{:url('admin/login/loginOut')}">安全退出</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <div class="skin-setttings">
                    <div class="title"><i class="fa fa-comments-o"></i>主题设置</div>
                    <div class="setings-item default-skin nb">
                        <span class="skin-name ">
                            <a href="#" class="s-skin-0">
                                魔法森林夜
                            </a>
                        </span>
                    </div>
                    <div class="setings-item blue-skin nb">
                        <span class="skin-name ">
                            <a href="#" class="s-skin-1">
                                蓝色生死恋
                            </a>
                        </span>
                    </div>
                    <div class="setings-item yellow-skin nb">
                        <span class="skin-name ">
                            <a href="#" class="s-skin-3">
                                乌班图情怀
                            </a>
                        </span>
                    </div>
                    <div class="setings-item">
                        <span>收起左侧菜单</span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
                                <label class="onoffswitch-label" for="collapsemenu">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                        <span>固定顶部</span>

                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
                                <label class="onoffswitch-label" for="fixednavbar">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                        <span>固定宽度</span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
                                <label class="onoffswitch-label" for="boxedlayout">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item" style="padding:0;">
                        <div class="title"><i class="fa fa-book"></i> 便签</div>
                        <textarea id="memo" class="layui-textarea" rows="10" style="resize: none;border-left: 0;border-bottom: 0;" placeholder="便签中的内容会自动存储在本地，这样即便你关掉了浏览器，在下次打开时，依然会读取到上一次的记录。是个非常小巧实用的本地备忘录。便签储存的时间为一个月，如果在一个月内没有更新便签，便签的内容会清空。注：清除浏览器缓存，也会清空便签"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--右侧边栏结束-->
<!-- start of msg list -->
<div id="msg-list" class="not-show">
	<ul>
		<li class="go-to-msg-center">
			{if(authCheck('socketmsg/index'))}
			<a class="J_menuItem hide_mask" href="{:url('Socketmsg/index')}?user_id={:session('id')}">
				<i class="fa fa-bell"></i> 消息中心
			</a>
			{else}
			<a class="" href="#">
				<i class="fa fa-list"></i> 消息列表
			</a>
			{/if}
		</li>
		<div id="my-msg-list">
			{volist name="MsgList.list" id="v"}
			<hr>
			<li class="pointer" data-msg_id="{$v.id}" data-msg_name="{$v.msg_name}" data-is_read="{$v.is_read}">
				<img src="{$v.user_info.head}" width="50" height="50" title="{$v.msg_name}:{$v.user_info.real_name}">
				<span class="last-msg">{$v.last_msg}</span>
				<span class="layui-badge-dot"></span>
			</li>
			{/volist}
		</div>
	</ul>
</div>
<audio src="" controls="controls" autoplay="false" id="RingMp3">
Your browser does not support the audio element.
</audio>
<!-- end of msg list -->
</div>
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/jquery.cookie.js"></script>
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
<script src="__JS__/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="__JS__/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__JS__/plugins/layer/layer.min.js"></script>
<script src="__JS__/hplus.min.js?v=4.1.0"></script>
<script src="__JS__/layui/layui.js"></script>
<script src="__JS__/contabs.js"></script>
<script src="__JS__/finalove.admin.init.js"></script>
<script type="text/javascript">
var cookiename = 'username' + {$user_id};
var Ring_mp3 = "__RESOURCE__/ring.mp3";
var ws = new WebSocket('{$Webset.socket_addr}');
ws.onopen = function(){
    var uid = "uid:{:session('id')}";
    ws.send(uid);
};
ws.onmessage = function(e){
	// 右下侧弹窗
	var data = JSON.parse(e.data);
	if (window.Notification) {
		Notification.requestPermission(function (permission) {
		    if (permission == "granted") {
		        var notification = new Notification(data.info.real_name,{
					sound:Ring_mp3,
		            dir: "auto",
		            lang: "zh-CN",
		            tag: "Notice",
					renotify:true,
		            icon:data.info.head,
		            body: data.msg,
		        });
				notification.onclick=function() {
					if(window.innerWidth > 700){
						var layer_width = "600";
						var layer_height = "630";
					}else{
						var layer_width = "100%";
						var layer_height = "100%";
					}
					window.open('{:url("Socketmsg/show")}?msg_id='+data.info.chat_room_id,data.info.msg_name,"height="+layer_height+",width="+layer_width+",toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
				}
		    }
		});
	}else{
		var ct = '<div class="socketMsgAlert">';
			ct +='<p class="head"><img src="'+data.info.head+'" width="50" height="50"/></p><br>';
			ct +='<p class="name">'+data.info.real_name+'</p><hr>';
			ct +='<div class="msg_ct">'+data.msg+'</div>';
			ct +='</div>';
		if(window.innerWidth > 700){
			var alert_offset = 'rb',
				alert_area = "200px",
				alert_maxHeight = "250px",
				alert_shift = 2;
		}else{
			var alert_offset = '15px',
				alert_area = "90%",
				alert_maxHeight = "150px",
				alert_shift = 5;
		}
		layer.open({
			type:1,shift:alert_shift,scrollbar:false,title:false,
			area:alert_area,maxHeight:alert_maxHeight,time:1500,
			shade:0,offset:alert_offset,
			skin:'demo-class socketMsgAlertBox',
			content:ct,
			success:function() {
				$("#RingMp3").attr({src:Ring_mp3,autoplay:true});
			}
		});
	}
	// msgList
	setMsgListStatus(data);
};

// 打开的会话窗口
// var conversation_list = [];
$("#msg-list .pointer").on("click",function(){
	$(".Mask").hide();
	$("#msg-list").addClass("not-show");
	// 设置已读
	$(this).attr({"data-is_read":"1"});
	setMsgListStatus(0);
	// 打开窗口
	var msg_id = $(this).attr('data-msg_id');
	var msg_name = $(this).attr('data-msg_name');
	var layer_name = "layer_" + msg_id;
	// layer.close(conversation_list[layer_name]);
	if(window.innerWidth > 700){
		var layer_width = "600px";
		var layer_height = "630px";
		var width_height_opt = "height="+layer_height+",width="+layer_width+",";
	}else{
		var layer_width = "";
		var layer_height = "";
		var width_height_opt = "";
	}
	window.open('{:url("Socketmsg/show")}?msg_id='+msg_id,msg_name,width_height_opt+"top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
	// var index = layer.open({
	// 	type:2,maxmin: true,
	// 	area:[layer_width,layer_height],
	// 	title:msg_name,
	// 	shade:0,scrollbar:false,
	// 	skin: 'demo-class conversationAlertBox',
	// 	content:'{:url("Socketmsg/show")}?msg_id='+msg_id,
	// 	moveEnd:function() {
	// 		$("#IframeMark").hide();
	// 	}
	// });
	// conversation_list[layer_name] = index;
	// layer 拖动
	// $(".layui-layer-title").on("mousedown",function() {
	// 	$("#IframeMark").show();
	// });
});
</script>
</body>

</html>
